<template>
  <div>
    <h1>【aty-timeline】 component demo</h1>
    <p>【aty-timeline】 本质</p>

    <aty-row class="fd-timeline-box">
      <aty-row>
        <aty-title level="4">1.【aty-timeline】  基础</aty-title>
        <aty-timeline>
          <aty-timeline-item>
            <p class="time">1976年</p>
            <p class="content">Apple I 问世</p>
          </aty-timeline-item>
          <aty-timeline-item>
            <p class="time">1984年</p>
            <p class="content">发布 Macintosh</p>
          </aty-timeline-item>
          <aty-timeline-item>
            <p class="time">2007年</p>
            <p class="content">发布 iPhone</p>
          </aty-timeline-item>
          <aty-timeline-item>
            <p class="time">1976年</p>
            <p class="content">Apple I 问世</p>
          </aty-timeline-item>
          <aty-timeline-item>
            <p class="time">2010年</p>
            <p class="content">发布 iPad</p>
          </aty-timeline-item>
          <aty-timeline-item>
            <p class="time">2011年10月5日</p>
            <p class="content">史蒂夫·乔布斯去世</p>
          </aty-timeline-item>
        </aty-timeline>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-timeline】  颜色</aty-title>
        <aty-panel>用各种颜色来标识不同状态，可以使用green、red、blue或自定义的颜色，默认是 blue 。</aty-panel>
        <aty-timeline>
          <aty-timeline-item color="green">发布1.0版本</aty-timeline-item>
          <aty-timeline-item color="green">发布2.0版本</aty-timeline-item>
          <aty-timeline-item color="red">严重故障</aty-timeline-item>
          <aty-timeline-item color="blue">发布3.0版本</aty-timeline-item>
        </aty-timeline>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-timeline】  最后一个</aty-title>
        <aty-panel>通过添加pending属性来标记最后一个为幽灵节点，标识还未完成。</aty-panel>
        <aty-timeline pending>
          <aty-timeline-item color="green">发布1.0版本</aty-timeline-item>
          <aty-timeline-item color="green">发布2.0版本</aty-timeline-item>
          <aty-timeline-item color="green">严重故障</aty-timeline-item>
          <aty-timeline-item color="blue"> <aty-link text="查看更多" /></aty-timeline-item>
        </aty-timeline>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-timeline】  自定义时间轴点 </aty-title>
        <aty-panel>通过添加pending属性来标记最后一个为幽灵节点，标识还未完成。</aty-panel>
        <aty-timeline>
          <aty-timeline-item color="green">
            <aty-icon type="trophy" slot="dot" />
            <aty-text>发布里程碑版本</aty-text>
          </aty-timeline-item>
          <aty-timeline-item color="green">发布1.0版本</aty-timeline-item>
          <aty-timeline-item color="green">发布2.0版本</aty-timeline-item>
        </aty-timeline>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-timeline】  自定义内容 </aty-title>
        <aty-timeline>
          <aty-timeline-item color="green">
            <aty-card width="500px" height="auto">
              <h3 slot="header">创建</h3>
              <span>2018-05-05 创建了该文档</span>
            </aty-card>
          </aty-timeline-item>
          <aty-timeline-item>
            <aty-card width="500px" height="auto">
              <h3 slot="header">编辑</h3>
              <span>2018-08-06 编辑了该文档</span>
            </aty-card>
          </aty-timeline-item>
          <aty-timeline-item>
            <aty-card width="500px" height="auto">
              <h3 slot="header">删除</h3>
              <span>2018-11-01 删除了该文档</span>
            </aty-card>
          </aty-timeline-item>
          <aty-timeline-item>
            <aty-card width="500px" height="auto">
              <h3 slot="header">复活</h3>
              <span>2018-12-01 复活了该文档</span>
            </aty-card>
          </aty-timeline-item>
        </aty-timeline>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
}
</script>
<style  lang="less" type="text/less"  >
    .fd-timeline-box {
        margin: 20px;
        text-align: left;
    }
    .time{
        font-size: 14px;
        font-weight: bold;
    }
    .content{
        padding-left: 5px;
    }
</style>
